{% extends "layouts/base.html" %}
{% load i18n l10n static %}

{% block content %}
<div class="container my-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0">{% trans "Leilões Ativos" %}</h2>
    <a href="{% url 'auction:criar_leilao' %}" class="btn btn-primary">
      <i class="bi bi-plus-circle"></i> {% trans "Criar Leilão" %}
    </a>
  </div>

  {% if leiloes %}
    <div class="row g-4">
      {% for leilao in leiloes %}
      <div class="col-md-6 col-lg-4">
        <div class="card bg-dark text-light border-secondary h-100">
          <div class="card-header d-flex justify-content-between align-items-center">
            <strong>{{ leilao.item_name }}</strong> <!-- Usando item_name diretamente -->
            <span class="badge bg-primary">ID: {{ leilao.item_id }}</span> <!-- Usando item_id -->
          </div>
          <div class="card-body">
            <div class="d-flex align-items-center mb-3">
              <img src="{% static 'assets/img/l2/icons/5-' %}{{ leilao.item_id|unlocalize }}.jpg"
                   alt="{{ leilao.item_name }}"
                   class="me-3 rounded border border-secondary"
                   style="width: 64px; height: 64px;"
                   onerror="this.src='{% static 'assets/img/l2/icons/default.jpg' %}'">
              <div>
                <p class="mb-1">
                  <i class="bi bi-person-fill"></i>
                  <strong>{% trans "Vendedor:" %}</strong> {{ leilao.seller.username }}
                </p>
                <p class="mb-1">
                  <i class="bi bi-currency-dollar"></i>
                  <strong>{% trans "Lance Atual:" %}</strong>
                  R$ {{ leilao.current_bid|default:leilao.starting_bid }}
                </p>
                <p class="mb-0">
                  <i class="bi bi-clock-fill"></i>
                  <strong>{% trans "Restante:" %}</strong>
                  <span class="text-warning fw-bold">
                    {{ leilao.end_time|timeuntil }}
                  </span>
                </p>
              </div>
            </div>
          </div>
          <div class="card-footer d-flex justify-content-between">
            <a href="{% url 'auction:fazer_lance' leilao.id %}" class="btn btn-success btn-sm">
              <i class="bi bi-gavel"></i> {% trans "Dar Lance" %}
            </a>
            {% if leilao.seller == user %}
              <a href="{% url 'auction:encerrar_leilao' leilao.id %}" class="btn btn-danger btn-sm">
                <i class="bi bi-x-circle"></i> {% trans "Encerrar" %}
              </a>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="alert alert-secondary text-center" role="alert">
      {% trans "Nenhum leilão ativo no momento." %}
    </div>
  {% endif %}
</div>
{% endblock %}
